<template>
  <div class="adjust-container">
    <!--Filter-->
    <filter-data
      :config="filterConfig"
      :filter-data="listQuery"
      @filter="filterSearch"
    />
    <el-table
      ref="goodsTable"
      v-loading="listLoading"
      :data="goodsList"
      style="width: 100%"
      row-key="id"
      height="375px"
      size="small"
      class="custom-goods-table"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column
        width="55"
        align="center"
        type=""
        label="选择"
      >
        <template slot-scope="scope">
          <span style="cursor: pointer">
            <el-radio
              v-model="activeId"
              :label="scope.row.id"
              class="empty-label-radio"
              @change.native="handleCurrentChange(scope.row)"
            ><span /></el-radio>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动名称"
        width="250px"
      >
        <template slot-scope="scope">
          <em-cell
            :title="scope.row.title"
            :label="scope.row.dateRange"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="store"
        label="店铺"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.store">
            {{ scope.row.store.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="format"
        label="活动类型"
      />
      <el-table-column
        prop="productCount"
        label="商品数量"
        align="right"
      />
    </el-table>
    <pagination
      v-show="meta.totalCount>0"
      :total="meta.totalCount"
      :limit="meta.perPage"
      :page-count="5"
      :background="false"
      :small="true"
      layout="total, prev, pager, next, jumper"
      :page.sync="listQuery.page"
      @currentPage="meta.currentPage"
      @pageSize="meta.perPage"
      @pagination="getData"
    />
  </div>
</template>

<script>
import FilterData from './filter.vue'
import Pagination from '@/components/Pagination'
export default {
  name: 'ActivityLink',
  components: {
    FilterData,
    Pagination
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  inject: ['usage'],
  data() {
    return {
      // 表格配置
      filterConfig: [
        {
          label: '商品名称/货号/关键字',
          prop: 'keyword',
          type: 'text'
        }
      ],
      // 新增修改模态框title
      activeId: 0,
      activeRow: null,
      // 展示的表格数据，数据来源可能是父组件传递的固定数据，可能是接口请求数据
      goodsList: [],
      meta: {
        // 列表数据总数
        totalCount: 0,
        pageCount: 1,
        // 当前页码
        currentPage: 1,
        // 每页显示数量
        perPage: 20
      },
      listQuery: {
        page: 1
      },
      // 表单数据
      formModel: {},
      //  表格加载状态
      listLoading: false
    }
  },
  computed: {
    bindParam() {
      const usage = this.usage()
      return usage && { usage: usage }
    }
  },
  watch: {
    activeRow(v) {
      this.setCurrent(v)
    }
  },
  created() {
    console.log('12初始化完成')
    this.getData()
  },
  mounted() {
    if (this.value && this.value.map_data) {
      this.activeId = this.value.map_data.id
      console.log('2mounted完成', this.activeId)
    }
  },
  methods: {
    getData(params = null) {
      this.listLoading = true
      const queryParams = Object.assign(this.listQuery, this.bindParam, params)
      console.log('queryParams:', queryParams)
      this.$http.assemble.activity(queryParams).then(
        response => {
          const { data } = response
          this.goodsList = data.items
          this.meta = data.meta
          this.listLoading = false
        },
        error => {
          console.log(error)
          this.listLoading = false
        }
      )
    },
    // Filter数据检索提交
    filterSearch(data) {
      this.listQuery.page = 1
      this.getData(data)
    },
    setCurrent(row) {
      this.activeId = row.id
      this.$refs.goodsTable.setCurrentRow(row)
      this.$emit(
        'input',
        Object.assign(
          {
            fence_id: this.value.fence_id
          },
          row.mapData
        )
      )
    },
    handleCurrentChange(val) {
      this.activeRow = val
    }
  }
}
</script>
<style lang="scss" scoped>
.adjust-container {
  height: 100%;
  > .el-main {
    flex: 1;
  }
  .pagination-container {
    padding: 10px 0 0;
    margin: 0;
  }
}
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}

::v-deep .el-table__body-wrapper {
  scrollbar-width: thin;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #ededed;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: skyblue;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }
}
</style>
<style lang="scss" >
.empty-label-radio {
  .el-radio__label {
    padding: 0;
  }
}
</style>

